<template>
  <div class="home">
    <el-container>
      <el-aside :width="toggleCollapse ? '180px' : '50px'">
        <div class="logo">
          <img src="@/assets/common/logo.png" />
        </div>
        <el-menu
          background-color="rgba(99, 161, 254,.1)"
          text-color="#fff"
          active-text-color="#409Eff"
          :collapse-transition="false"
          :default-active="$route.path"
          :collapse="!toggleCollapse"
          router
        >
          <!-- :collapse="isCollapse" -->
          <el-menu-item :index="item.path" v-for="(item, i) in page" :key="i">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header class="header">
          <div class="title">
            <i
              class="el-icon-s-fold"
              style="position: relative"
              @click="toggleCollapse = !toggleCollapse"
            ></i>
            <span style="margin-left: 20px">小凡人才管理中心</span>
            <span data-v-4234c96d="" class="breadBtn">体验版</span>
          </div>
          <div class="menu">
            <el-tooltip
              class="aj"
              effect="dark"
              content="搜索"
              placement="bottom"
            >
              <i class="el-icon-search"></i>
            </el-tooltip>

            <el-tooltip
              class="aj"
              effect="dark"
              content="使用文档"
              placement="bottom"
            >
              <i class="el-icon-document"></i>
            </el-tooltip>
           
            <el-tooltip
              content="全屏缩放"
              effect="dark"
              placement="bottom"
              fullscreen
            >
              <i class="el-icon-full-screen" @click="isScreenFull"></i>
            </el-tooltip>

            <el-tooltip
              class="aj"
              effect="dark"
              content="多语言"
              placement="bottom"
            >
              <i class="el-icon-search"></i>
            </el-tooltip>
            <el-tooltip
              class="item aj"
              effect="dark"
              content="换肤"
              placement="bottom"
            >
              <el-color-picker v-model="color1" size="small"></el-color-picker>
            </el-tooltip>

            <span>
              <el-avatar size="small" :src="photo"></el-avatar>
              <!-- :src="userList.staffPhoto" -->
            </span>
            <el-dropdown @command="menuBar">
              <span class="el-dropdown-link">
                {{ userInfo.username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="/dashboard">首页</el-dropdown-item>
                <el-dropdown-item command="/login">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import * as api from '@/api/home'
import screenfull from 'screenfull'
export default {
  data() {
    return {
      photo:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      isFullscreen: false, //是否全屏
      toggleCollapse: true, //是否折叠
      color1: '#409EFF',
      SelectionBox: [
        // {
        //   icon: 'el-icon-s-home',
        //   title: '首页',
        //   path: '/dashboard'
        // },
        {
          icon: 'el-icon-s-grid',
          title: '组织架构',
          path: '/departments'
        },
        {
          icon: 'el-icon-s-check',
          title: '员工',
          path: '/employees'
        },
        {
          icon: 'el-icon-setting',
          title: '公司设置',
          path: '/settings'
        },
        {
          icon: 'el-icon-setting',
          title: '权限设置',
          path: '/permissions'
        },
        {
          icon: 'el-icon-s-custom',
          title: '社保',
          path: '/social_securitys'
        },
        {
          icon: 'el-icon-notebook-1',
          title: '考勤',
          path: '/attendances'
        },
        {
          icon: 'el-icon-s-data',
          title: '工资',
          path: '/salarys'
        },
        {
          icon: 'el-icon-user-solid',
          title: '审批',
          path: '/approvals'
        }
      ],
      userInfo: ''
    }
  },

  mounted() {
    this.getuserinfo()
  },

  computed: {
    ...mapState('homePage', ['userList']),
    page() {
      const homepage = {
        icon: 'el-icon-s-home',
        title: '首页',
        path: '/dashboard'
      }
      if (!this.userInfo.roles) {
        return [homepage]
      }
      return [homepage].concat(
        this.SelectionBox.filter((item) => {
          const path = item.path.replace('/', '')
          return this.userInfo.roles.menus.includes(path)
        })
      )
    }
  },

  methods: {
    ...mapActions('homePage', ['updatedUserList']),
    ...mapMutations(['userInfoData']),
    async getuserinfo() {
      await api
        .getUserInfo()
        .then((res) => {
          this.userInfo = res.data.data
          this.userInfoData(this.userInfo),
          this.updatedUserList(this.userInfo.userId)
          // console.log(this.userInfo)
        })
        .catch((err) => {
          console.log(err)
        })
    },

    active() {
      this.clickMenu = this.$route.path
    },
    menuBar(command) {
      // console.log(this.$router)
      if (command == '/login') {
        this.open(command)
        return
      } else {
        // this.clickMenu = command
        this.$router.push(command)
      }
    },
    // 退出登录
    open(command) {
      this.$confirm('确认退出登录吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.$router.push(command)
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },

    //全屏方法
    isScreenFull() {
      // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了

      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: '您的浏览器不支持全屏显示哦！',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  }
}
</script>

<style lang='less' scope>
* {
  padding: 0;
  margin: 0;
}
.home {
  .logo {
    width: 100%;
    height: 60px;
    // background: #fff;
    // overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .header {
    position: relative;
    background: rgba(75, 123, 251);
    .title {
      position: absolute;
      top: 0;
      left: 20px;
      color: #fff;
      .breadBtn {
        background: #84a9fe;
        font-size: 14px;
        padding: 0 10px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        margin-left: 15px;
      }
    }
    .menu {
      position: absolute;
      color: #fff;
      top: 0;
      right: 20px;
      font-size: 20px;
      .item {
        position: relative;
        top: 10px;
      }
      .aj {
        margin: 0 10px;
      }
      .el-avatar--small {
        position: relative;
        top: 5px;
        margin: 0 5px 0 10px;
      }
    }
  }

  .el-menu-item:hover {
    background: #fff;
  }
}

.el-header,
.el-footer {
  line-height: 60px;
}

.el-aside {
  background: url(../../assets/common/logBg.png);
}

.el-main {
  background-color: #e9eef3;
}

.el-container {
  height: 100vh;
}
.el-menu-item.is-active {
  background: #fff !important;
}
.el-menu-item i {
  color: #fff;
}
.el-dropdown {
  color: #fff;
}

.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>